<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">

        <style type="text/css">

             li{
             	list-style: none;
             	float:left;
             }

			li a{
			     
			 	 height: 35px;
			 	 background-image: url("bg_r1_c1.png");
			 	 background-repeat: no-repeat;
			 	 padding-left: 7px;
			 	 display: inline-block;
        color: white;
			 }

			 li span{
				 height: 35px;
			 	 background-image: url("bg_r1_c2.png");
			 	 background-repeat: no-repeat;
			 	 background-position: right;
			 	 display: inline-block;
			 	 padding-right:22px;
        line-height: 35px;
			  }
        li a:hover{
                background:url("bbg_r1_c1.png");
              }
         li a:hover span{
                background:url("bbg_r1_c2.png") right;

              }
        </style>
    </head>
    <body>

    	  <ul>
    	  	 <li>
    	  	 	 <a href="#">
    	  	 	 	 <span>百度一下</span>
    	  	 	 </a>
    	  	 </li>

    	  	  <li>
    	  	 	 <a href="#">
    	  	 	 	 <span>百度</span>
    	  	 	 </a>
    	  	 </li>
    	  	  <li>
    	  	 	 <a href="#">
    	  	 	 	 <span>中国新闻网</span>
    	  	 	 </a>
    	  	 </li>
    	  </ul>
    </body>
</html>